<template>
  <div class="welcomeIndex">
    <div class="page">
      <ul>
        <li v-for="(item,id) in listData" :key="id">{{item.name}}</li>
      </ul>
      <dl>
        <dd @click="prev_page">上一页</dd>
        <dd :class="{active:(id+1)==currentPage}" @click="cole(id)" v-for="(item,id) in total" :key="id">{{item}}</dd>
        <dd @click="nextClick">下一页</dd>
      </dl>
    </div>
    <button v-if="isShow" @click="btnTime">{{temp}}</button>
  </div>
</template>

<script>
export default {
  name:'welcomeIndex',
  data(){
    return{
      temp:'倒计时',
      isShow:true,
      // 模拟后台数据
       pageData:{
         total:9,
          data:[
            {
            id:1,
            name:'西瓜'
          },
          {
            id:2,
            name:'苹果'
          },
          {
            id:3,
            name:'香蕉'
          },
          {
            id:4,
            name:'橘子'
          },
          {
            id:5,
            name:'榴莲'
          },
          {
            id:6,
            name:'葡萄'
          },
          {
            id:7,
            name:'栗子'
          },
          {
            id:8,
            name:'哈密瓜'
          },
          {
            id:9,
            name:'龙眼'
          }
       ]
       },
      //  当前页数
      currentPage:1,
      // 每页显示数据
      pageSize:3,
      // 总页数
      total:0,
      // 数据列表
      listData:[]
    }
  },
  methods:{
    paging(){
       console.log(this.pageData, '')
      //  总条数
       this.total = Math.ceil(this.pageData.total/3)
      //  分页数据
       this.listData = this.pageData.data.slice(0,this.pageSize)
    },
    // 上一页
     prev_page(){
      if(this.currentPage==1){
        return
      }
      --this.currentPage
      this.listData = this.pageData.data.slice(this.pageSize*(this.currentPage-1),this.pageSize*this.currentPage)
    },
     // 下一页
  nextClick(){
    if(this.currentPage==this.total){
      return
    }
    console.log(this.currentPage, '')
    ++this.currentPage
    this.listData = this.pageData.data.slice(this.pageSize*(this.currentPage-1),this.pageSize*this.currentPage)
  },
  // 点击跳转到指定页面
  cole(id){
    console.log(id, '')
    this.currentPage = id+1
    this.listData = this.pageData.data.slice(this.pageSize*id,this.pageSize*(id+1))
  },
  // 时间按钮
  btnTime(){
    let time =10;
    let times = setInterval(()=>{
       if(time == 0){
          clearInterval(times)
          this.temp = '倒计时'
       }else{
         this.temp = time+'秒'
         time--
       }
    },1000)
  }
  },
  mounted(){
    this.paging()
  },
}
json
//  GroupSysID,ProblemSyID,OptionSysID
</script>

<style lang="less" scoped>
 .welcomeIndex{
   width: 100%;
   height: 100%;
   .page{
     ul{
       li{
         list-style-type: none;
       }
     }
     dl{
       width: 100%;
       display:flex;
       flex-direction: row;
       dd{
         border: 1px solid #f00;
         padding:4px 10px;
         margin: 0 6px;
        cursor:pointer
       }
       dd:hover{
         background: chartreuse;
         color: #fff;
       }
       .active{
         background: crimson;
       }
     }
   }
 }
</style>
